<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<style type="text/css">
    #myCanvas{border:dashed 2px #CCC}
</style>

<?php
	error_reporting(0);
                $link=mysql_connect('localhost','root','root');
                if($link)
                {
                    mysql_select_db('ncqihang',$link);
                    //your code goes here	
                }
                $sql ="SELECT data FROM CPie order by id asc";
                $result = mysql_query($sql)
                        or die(SQL语句执行失败);
                       
?>   	    
 
<body>
        <canvas id="myCanvas" width="700px" height="400px">
        </canvas>
        <div id="title" style="position:absolute;left:250px;top:0px;">
            	<h4>数据1-网络调查-获取知识的渠道</h4>
                <h5 align="center">南城启航</h5>
            </div>
         <div id="first" style="position:absolute;left:20px;top:50px;">
         		<h6><img src="res/img/first.png">网络</h6>
         </div>
         <div id="second" style="position:absolute;left:20px;top:100px;">
         		<h6><img src="res/img/second.png">书本</h6>
         </div>
         <div id="third" style="position:absolute;left:20px;top:150px;">
         		<h6><img src="res/img/third.png">电视</h6>
         </div>
         <div id="fourth" style="position:absolute;left:20px;top:200px;">
         		<h6><img src="res/img/fourth.png">询问</h6>
         </div>
         <div id="fifth" style="position:absolute;left:20px;top:250px">
         		<h6><img src="res/img/fifth.png">其他</h6>
         </div>
         
         <div>
         	<h2>Canvas饼图</h2>
            <button onClick="startdrawPie()"><font face="微软雅黑" size="+1">画图&原始数据</font></button>
            <button onClick="randomdata()"><font face="微软雅黑" size="+1">切换随机数据</font></button>
            <h4>由于技术原因和展示的目的，这里的随机数为伪随机数</h4>
            <h4 align="center"><font face="微软雅黑">自定义数据</font></h4>
   

            
           		数据1：<input type="number" id="number1" min="0" max="99" placeholder="100以内  "/>&nbsp;&nbsp;
                <button onClick="confirm1()">确认输入</button>
                <br>
                <br>
           		数据2：<input type="number" id="number2" min="0" max="99" placeholder="100以内  "/>&nbsp;&nbsp;
                <button onClick="confirm2()">确认输入</button>
                <br>
                <br>
           		数据3：<input type="number" id="number3" min="0" max="99" placeholder="100以内  "/>&nbsp;&nbsp;
                <button onClick="confirm3()">确认输入</button>
           		<br>
                <br>
                数据4：<input type="number" id="number4" min="0" max="99" placeholder="100以内  "/>&nbsp;&nbsp;
           		<button onClick="confirm4()">确认输入</button>
                <br>
                <br>
                数据5：<input type="number" id="number5" min="0" max="99" placeholder="100以内"/>&nbsp;&nbsp;
           		<button onClick="diydrawPie()"><font face="微软雅黑" size="+1">绘制</font></button>
                <br><br>
           		<a href="canvasLine.php">Canvas线状图</a>
                <a href="canvasColumn.php">Canvas柱状图</a>
                <a href="canvasArea.php">Canvas面积图</a>
                <a href="index.html">返回主页</a>
         </div>
    </body>
    <script type="text/javascript">
	var piedata = new Array(4);
	function confirm1(){
		document.getElementById("number2").setAttribute("value","");
		piedata[0]=document.getElementById("number1").value;
		var a1=document.getElementById("number2");
		a1.setAttribute("max",100-piedata[0]-1);
		a1.setAttribute("placeholder",100-piedata[0]+"以内");
		if(piedata[0]>99.9||piedata[0]<=0){
			d1=false;
			alert("您输入的数据1超出范围！请重新输入！")
			}
		}
		
	function confirm2(){
		piedata[1]=document.getElementById("number2").value;
		var a2=document.getElementById("number3");
		a2.setAttribute("max",100-piedata[0]-piedata[1]-1);
		a2.setAttribute("placeholder",100-piedata[0]-piedata[1]+"以内");
		if(piedata[1]>=100-piedata[0]||piedata[1]<=0){
			d2=false;
			alert("您输入的数据2超出范围！请重新输入！")
			}
		}
	function confirm3(){
		piedata[2]=document.getElementById("number3").value;
		var a3=document.getElementById("number4");
		a3.setAttribute("max",100-piedata[0]-piedata[1]-piedata[2]-1);
		a3.setAttribute("placeholder",100-piedata[0]-piedata[1]-piedata[2]+"以内");
		if(piedata[2]>=100-piedata[0]-piedata[1]||piedata[2]<=0){
			d3=false;
			alert("您输入的数据3超出范围！请重新输入！")
			}
		}
	function confirm4(){
		piedata[3]=document.getElementById("number4").value;
		var a4=document.getElementById("number5");
		a4.setAttribute("max",100-piedata[0]-piedata[1]-piedata[2]-piedata[3]);
		a4.setAttribute("value",100-piedata[0]-piedata[1]-piedata[2]-piedata[3]);
		a4.setAttribute("min",100-piedata[0]-piedata[1]-piedata[2]-piedata[3]);
		if(piedata[3]>=100-piedata[0]-piedata[1]-piedata[2]||piedata[3]<=0){
			d4=false;
			alert("您输入的数据4超出范围！请重新输入！")
			}
		}
		
	function diydrawPie(){
		/*
		if(d1||d2||d3||d4){
			alert("ok");
			}
		else{
			alert("您的数据有误！请检查");
			return;
			}
			*/
		piedata[4]=document.getElementById("number5").value;
		var b=200;
		//alert(parseInt(b/3));
        var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,700,400);
		/*
		ctx.shadowOffsetX=10;
		ctx.shadowOffsetY=10;
		ctx.shadowBlur=10;
		ctx.shadowColor="#c5c5c0";
		*/
		ctx.beginPath();
   	    
		for(var n=0;n<5;n++){
			piedata[n]=piedata[n]/100;
			piedata[n]=piedata[n]*360
			piedata[n]=piedata[n]*Math.PI/180;
					
		}
		var piedata2=new Array(piedata[0],piedata[0]+piedata[1],piedata[0]+piedata[1]+piedata[2],piedata[0]+piedata[1]+piedata[2]+piedata[3],piedata[0]+piedata[1]+piedata[2]+piedata[3]+piedata[4]);
	
		//alert(piedata[1]*(Math.PI*2));
	
	
    ctx.arc(350, 240, 150, 0, piedata2[0], false);    
    //按照指定的路径绘制弧线
	ctx.lineTo(350,240);
	ctx.fillStyle = "#35a2ff"; 
    ctx.fill();
    ctx.stroke();
	
	
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[0], piedata2[1], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "#6bff87"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[1], piedata2[2], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "black"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[2], piedata2[3], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "red"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[3], piedata2[4], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "yellow"; 
    ctx.fill();
    ctx.stroke();
		}
	
	
	function startdrawPie(){
		var b=200;
		//alert(parseInt(b/3));
        var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,700,400);
		/*
		ctx.shadowOffsetX=10;
		ctx.shadowOffsetY=10;
		ctx.shadowBlur=10;
		ctx.shadowColor="#c5c5c0";
		*/
		ctx.beginPath();

		<?php
			 echo 'var piedata=new Array(';
                        while($row =mysql_fetch_row($result))
                        {	
                            echo $row[0].',';
                                //echo 'var areadata=new Array('.$row[0].', '.$row[1].', '.$row[2].', '.$row[3].', '.$row[4].', '.$row[5].', '.$row[6].', '.$row[7].', '.$row[8].', '.$row[9].', '.$row[10].', '.$row[11].');';													
                        }
                        echo '0);';
                        mysql_free_result($result);
                        mysql_close();
		?>
   		//var piedata=new Array(60.2,8.5,5.2,21.2,4.9);
		for(var v=0;v<5;v++){
			d=v+1;
				document.getElementById("number"+d).value=piedata[v];
			}
		
		for(var n=0;n<5;n++){
			piedata[n]=piedata[n]/100;
			piedata[n]=piedata[n]*360
			piedata[n]=piedata[n]*Math.PI/180;
					
		}
		var piedata2=new Array(piedata[0],piedata[0]+piedata[1],piedata[0]+piedata[1]+piedata[2],piedata[0]+piedata[1]+piedata[2]+piedata[3],piedata[0]+piedata[1]+piedata[2]+piedata[3]+piedata[4]);
	
		//alert(piedata[1]*(Math.PI*2));
		
	
    ctx.arc(350, 240, 150, 0, piedata2[0], false);    
    //按照指定的路径绘制弧线
	ctx.lineTo(350,240);
	ctx.fillStyle = "#35a2ff"; 
    ctx.fill();
    ctx.stroke();
	
	
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[0], piedata2[1], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "#6bff87"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[1], piedata2[2], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "black"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[2], piedata2[3], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "red"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[3], piedata2[4], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "yellow"; 
    ctx.fill();
    ctx.stroke();
	}
	
	function randomdata(){
		
		var piedata=new Array(4);
		/*
		piedata[0]=Math.random()*100;
		piedata[1]=(100-piedata[0])*Math.random()*100;
		piedata[2]=(100-piedata[0]-piedata[1])*Math.random()*100;
		piedata[3]=(100-piedata[0]-piedata[1]-piedata[2])*Math.random()*100;
		piedata[4]=100-piedata[0]-piedata[1]-piedata[2]-piedata[3];
		*/
		
		piedata[0]=Math.random()*100/5;
		piedata[1]=(100-piedata[0])*Math.random()/4;
		piedata[2]=(100-piedata[0]-piedata[1])*Math.random()/3;
		piedata[3]=(100-piedata[0]-piedata[1]-piedata[2])*Math.random()/2;
		piedata[4]=100-piedata[0]-piedata[1]-piedata[2]-piedata[3];
		
		document.getElementById("number1").value=piedata[0];
		document.getElementById("number2").value=piedata[1];
		document.getElementById("number3").value=piedata[2];
		document.getElementById("number4").value=piedata[3];
		document.getElementById("number5").value=piedata[4];
		
		var b=200;
		//alert(parseInt(b/3));
        var c=document.getElementById("myCanvas");
		var ctx=c.getContext("2d");
		ctx.clearRect(0,0,700,400);
		/*
		ctx.shadowOffsetX=10;
		ctx.shadowOffsetY=10;
		ctx.shadowBlur=10;
		ctx.shadowColor="#c5c5c0";
		*/
		ctx.beginPath();
		
		
		for(var n=0;n<5;n++){
			piedata[n]=piedata[n]/100;
			piedata[n]=piedata[n]*360
			piedata[n]=piedata[n]*Math.PI/180;
					
		}
		var piedata2=new Array(piedata[0],piedata[0]+piedata[1],piedata[0]+piedata[1]+piedata[2],piedata[0]+piedata[1]+piedata[2]+piedata[3],piedata[0]+piedata[1]+piedata[2]+piedata[3]+piedata[4]);
	
		//alert(piedata[1]*(Math.PI*2));
	
	
    ctx.arc(350, 240, 150, 0, piedata2[0], false);    
    //按照指定的路径绘制弧线
	ctx.lineTo(350,240);
	ctx.fillStyle = "#35a2ff"; 
    ctx.fill();
    ctx.stroke();
	
	
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[0], piedata2[1], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "#6bff87"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[1], piedata2[2], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "black"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[2], piedata2[3], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "red"; 
    ctx.fill();
    ctx.stroke();
	
	ctx.beginPath();
	ctx.arc(350, 240, 150, piedata2[3], piedata2[4], false);    
	ctx.lineTo(350,240);
	ctx.fillStyle = "yellow"; 
    ctx.fill();
    ctx.stroke();
	
	
	}
	
	
    </script>
    
</html>